<!DOCTYPE html>
<!-- saved from url=(0051) -->
<html lang="en"
	class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./table-datagrid_files/font.css"
	type="text/css">
<link rel="stylesheet" href="./table-datagrid_files/fuelux.css"
	type="text/css">
<link rel="stylesheet" href="./table-datagrid_files/app.v1.css"
	type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="" style="">
	<section class="vbox">
		<header class="bg-dark dk header navbar navbar-fixed-top-xs">
			<div class="navbar-header aside-md">
				<a class="btn btn-link visible-xs"
					data-toggle="class:nav-off-screen,open" data-target="#nav,html">
					<i class="fa fa-bars"></i>
				</a> <a href="#" class="navbar-brand"
					data-toggle="fullscreen"><img
					src="./table-datagrid_files/logo.png" class="m-r-sm">Notebook</a>
				<a class="btn btn-link visible-xs" data-toggle="dropdown"
					data-target=".nav-user"> <i class="fa fa-cog"></i>
				</a>
			</div>
			<ul class="nav navbar-nav hidden-xs">
				<li class="dropdown"><a href="#"
					class="dropdown-toggle dker" data-toggle="dropdown"> <i
						class="fa fa-building-o"></i> <span class="font-bold">Activity</span>
				</a>
					<section
						class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
						<div class="wrapper lter m-t-n-xs">
							<a href="#" class="thumb pull-left m-r"> <img
								src="./table-datagrid_files/avatar.jpg" class="img-circle">
							</a>
							<div class="clear">
								<a href="#"><span
									class="text-white font-bold">@Mike Mcalidek</span></a> <small
									class="block">Art Director</small> <a
									href="#"
									class="btn btn-xs btn-success m-t-xs">Upgrade</a>
							</div>
						</div>
						<div class="row m-l-none m-r-none m-b-n-xs text-center">
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">245</span> <small
										class="text-muted">Followers</small>
								</div>
							</div>
							<div class="col-xs-4 dk">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">55</span> <small
										class="text-muted">Likes</small>
								</div>
							</div>
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">2,035</span> <small
										class="text-muted">Photos</small>
								</div>
							</div>
						</div>
					</section></li>
				<li>
					<div class="m-t m-l">
						<a href="price.html"
							class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade"><i
							class="fa fa-long-arrow-up"></i></a>
					</div>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
				<li class="hidden-xs"><a href="#"
					class="dropdown-toggle dk" data-toggle="dropdown"> <i
						class="fa fa-bell"></i> <span
						class="badge badge-sm up bg-danger m-l-n-sm count"
						style="display: inline-block;">3</span>
				</a>
					<section class="dropdown-menu aside-xl">
						<section class="panel bg-white">
							<header class="panel-heading b-light bg-light">
								<strong>You have <span class="count"
									style="display: inline;">3</span> notifications
								</strong>
							</header>
							<div class="list-group list-group-alt animated fadeInRight">
								<a href="#" class="media list-group-item"
									style="display: block;"><span
									class="pull-left thumb-sm text-center"><i
										class="fa fa-envelope-o fa-2x text-success"></i></span><span
									class="media-body block m-b-none">Sophi sent you a email<br>
									<small class="text-muted">1 minutes ago</small></span></a> <a
									href="#" class="media list-group-item">
									<span class="pull-left thumb-sm"> <img
										src="./table-datagrid_files/avatar.jpg" alt="John said"
										class="img-circle">
								</span> <span class="media-body block m-b-none"> Use awesome
										animate.css<br> <small class="text-muted">10
											minutes ago</small>
								</span>
								</a> <a href="#" class="media list-group-item">
									<span class="media-body block m-b-none"> 1.0 initial
										released<br> <small class="text-muted">1 hour ago</small>
								</span>
								</a>
							</div>
							<footer class="panel-footer text-sm">
								<a href="#" class="pull-right"><i
									class="fa fa-cog"></i></a> <a href="#notes"
									data-toggle="class:show animated fadeInRight">See all the
									notifications</a>
							</footer>
						</section>
					</section></li>
				<li class="dropdown hidden-xs"><a href="#"
					class="dropdown-toggle dker" data-toggle="dropdown"><i
						class="fa fa-fw fa-search"></i></a>
					<section class="dropdown-menu aside-xl animated fadeInUp">
						<section class="panel bg-white">
							<form role="search">
								<div class="form-group wrapper m-b-none">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="Search">
										<span class="input-group-btn">
											<button type="submit" class="btn btn-info btn-icon">
												<i class="fa fa-search"></i>
											</button>
										</span>
									</div>
								</div>
							</form>
						</section>
					</section></li>
				<li class="dropdown"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <span
						class="thumb-sm avatar pull-left"> <img
							src="./table-datagrid_files/avatar.jpg">
					</span> John.Smith <b class="caret"></b>
				</a>
					<ul class="dropdown-menu animated fadeInRight">
						<span class="arrow top"></span>
						<li><a href="#">Settings</a></li>
						<li><a href="profile.html">Profile</a></li>
						<li><a href="#"> <span
								class="badge bg-danger pull-right">3</span> Notifications
						</a></li>
						<li><a href="docs.html">Help</a></li>
						<li class="divider"></li>
						<li><a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
						</li>
					</ul></li>
			</ul>
		</header>
		<section>
			<section class="hbox stretch">
				<!-- .aside -->
				<aside class="bg-light lter b-r aside-md hidden-print hidden-xs"
					id="nav">
					<section class="vbox">
						<header class="header bg-primary lter text-center clearfix">
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-dark btn-icon"
									title="New project">
									<i class="fa fa-plus"></i>
								</button>
								<div class="btn-group hidden-nav-xs">
									<button type="button"
										class="btn btn-sm btn-primary dropdown-toggle"
										data-toggle="dropdown">
										Switch Project <span class="caret"></span>
									</button>
									<ul class="dropdown-menu text-left">
										<li><a href="#">Project</a></li>
										<li><a href="#">Another Project</a></li>
										<li><a href="#">More Projects</a></li>
									</ul>
								</div>
							</div>
						</header>
						<section class="w-f scrollable">
							<div class="slim-scroll" data-height="auto"
								data-disable-fade-out="true" data-distance="0" data-size="5px"
								data-color="#333333">
									<!-- nav -->
										<!-- nav -->
								<nav class="nav-primary hidden-xs">
									<ul class="nav">
										<li class="active"><a href="index.jsp" class="active">
												<i class="fa fa-dashboard icon"> <b class="bg-danger"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Workset</span>
										</a>
											<ul class="nav lt">
												<li class="active"><a href="index.jsp" class="active">
														<i class="fa fa-angle-right"></i> <span>Dashboard
															v1</span>
												</a></li>
												<li><a href="dashboard.html"> <i
														class="fa fa-angle-right"></i> <span>Dashboard v2</span>
												</a></li>
											</ul></li>
										<li><a href="#layout"> <i
												class="fa fa-columns icon"> <b class="bg-warning"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Layouts</span>
										</a>
											<ul class="nav lt">
												<li><a href="layout-c.html"> <i
														class="fa fa-angle-right"></i> <span>Color option</span>
												</a></li>
												<li><a href="layout-r.html"> <i
														class="fa fa-angle-right"></i> <span>Right nav</span>
												</a></li>
												<li><a href="layout-h.html"> <i
														class="fa fa-angle-right"></i> <span>Hbox Layout</span>
												</a></li>
												<li><a href="layout-boxed.html"> <i
														class="fa fa-angle-right"></i> <span>Boxed Layout</span>
												</a></li>
												<li><a href="layout-fluid.html"> <i
														class="fa fa-angle-right"></i> <span>Fluid Layout</span>
												</a></li>
											</ul></li>
										<li><a href="#uikit"> <i class="fa fa-flask icon">
													<b class="bg-success"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>UI kit</span>
										</a>
											<ul class="nav lt">
												<li><a href="buttons.html"> <i
														class="fa fa-angle-right"></i> <span>Buttons</span>
												</a></li>
												<li><a href="icons.html"> <b
														class="badge bg-info pull-right">369</b> <i
														class="fa fa-angle-right"></i> <span>Icons</span>
												</a></li>
												<li><a href="grid.html"> <i
														class="fa fa-angle-right"></i> <span>Grid</span>
												</a></li>
												<li><a href="widgets.html"> <b
														class="badge pull-right">8</b> <i
														class="fa fa-angle-right"></i> <span>Widgets</span>
												</a></li>
												<li><a href="components.html"> <i
														class="fa fa-angle-right"></i> <span>Components</span>
												</a></li>
												<li><a href="list.html"> <i
														class="fa fa-angle-right"></i> <span>List group</span>
												</a></li>
												<li><a href="#table"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Table</span>
												</a>
													<ul class="nav bg">
														<li><a href="table-static.html"> <i
																class="fa fa-angle-right"></i> <span>Table static</span>
														</a></li>
														<li><a href="table-datatable.html"> <i
																class="fa fa-angle-right"></i> <span>Datatable</span>
														</a></li>
														<li><a href=""> <i
																class="fa fa-angle-right"></i> <span>Datagrid</span>
														</a></li>
													</ul></li>
												<li><a href="#form"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Form</span>
												</a>
													<ul class="nav bg">
														<li><a href="form-elements.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	elements</span>
														</a></li>
														<li><a href="form-validation.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	validation</span>
														</a></li>
														<li><a href="form-wizard.html"> <i
																class="fa fa-angle-right"></i> <span>Form wizard</span>
														</a></li>
													</ul></li>
												<li><a href="chart.html"> <i
														class="fa fa-angle-right"></i> <span>Chart</span>
												</a></li>
												<li><a href="fullcalendar.html"> <i
														class="fa fa-angle-right"></i> <span>Fullcalendar</span>
												</a></li>
												<li><a href="portlet.html"> <i
														class="fa fa-angle-right"></i> <span>Portlet</span>
												</a></li>
												<li><a href="timeline.html"> <i
														class="fa fa-angle-right"></i> <span>Timeline</span>
												</a></li>
											</ul></li>
										<li><a href="#pages"> <i
												class="fa fa-file-text icon"> <b class="bg-primary"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Pages</span>
										</a>
											<ul class="nav lt">
												<li><a href="gallery.html"> <i
														class="fa fa-angle-right"></i> <span>Gallery</span>
												</a></li>
												<li><a href="profile.html"> <i
														class="fa fa-angle-right"></i> <span>Profile</span>
												</a></li>
												<li><a href="invoice.html"> <i
														class="fa fa-angle-right"></i> <span>Invoice</span>
												</a></li>
												<li><a href="intro.html"> <i
														class="fa fa-angle-right"></i> <span>Intro</span>
												</a></li>
												<li><a href="master.html"> <i
														class="fa fa-angle-right"></i> <span>Master</span>
												</a></li>
												<li><a href="gmap.html"> <i
														class="fa fa-angle-right"></i> <span>Google Map</span>
												</a></li>
												<li><a href="jvectormap.html"> <i
														class="fa fa-angle-right"></i> <span>Vector Map</span>
												</a></li>
												<li><a href="login.jsp"> <i
														class="fa fa-angle-right"></i> <span>Signin</span>
												</a></li>
												<li><a href="signup.html"> <i
														class="fa fa-angle-right"></i> <span>Signup</span>
												</a></li>
												<li><a href="404.html"> <i
														class="fa fa-angle-right"></i> <span>404</span>
												</a></li>
											</ul></li>
										<li><a href="mail.html"> <b
												class="badge bg-danger pull-right">3</b> <i
												class="fa fa-envelope-o icon"> <b
													class="bg-primary dker"></b>
											</i> <span>Message</span>
										</a></li>
										<li><a href="notebook.html"> <i
												class="fa fa-pencil icon"> <b class="bg-info"></b>
											</i> <span>Notes</span>
										</a></li>
									</ul>
								</nav>
									<!-- / nav -->
								</div>
						</section>
						<footer class="footer lt hidden-xs b-t b-light">
							<div id="chat" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">Active
											chats</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No active chats.</p>
											<p>
												<a href="#"
													class="btn btn-sm btn-default">Start a chat</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<div id="invite" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">
											John <i class="fa fa-circle text-success"></i>
										</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No contacts in your lists.</p>
											<p>
												<a href="#"
													class="btn btn-sm btn-facebook"><i
													class="fa fa-fw fa-facebook"></i> Invite from Facebook</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<a href="#nav" data-toggle="class:nav-xs"
								class="pull-right btn btn-sm btn-default btn-icon"> <i
								class="fa fa-angle-left text"></i> <i
								class="fa fa-angle-right text-active"></i>
							</a>
							<div class="btn-group hidden-nav-xs">
								<button type="button" title="Chats"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#chat">
									<i class="fa fa-comment-o"></i>
								</button>
								<button type="button" title="Contacts"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#invite">
									<i class="fa fa-facebook"></i>
								</button>
							</div>
						</footer>
					</section>
				</aside>
				<!-- /.aside -->
				<section id="content">
					<section class="vbox">
						<section class="scrollable padder">
							<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
								<li><a href="index.jsp"><i class="fa fa-home"></i>
										Home</a></li>
								<li><a href="#">UI kit</a></li>
								<li><a href="#">Table</a></li>
								<li class="active">Datagrid</li>
							</ul>
							<div class="m-b-md">
								<h3 class="m-b-none">Datagrid</h3>
							</div>
							<section class="panel panel-default">
								<header class="panel-heading">
									DataGrid <i class="fa fa-info-sign text-muted"
										data-toggle="tooltip" data-placement="bottom"
										data-title="ajax to load the data." data-original-title=""
										title=""></i>
								</header>
								<div class="table-responsive">
									<table id="MyStretchGrid"
										class="table table-striped datagrid m-b-sm">
										<thead>
											<tr>
												<th colspan="5">
													<div class="row">
														<div class="col-sm-8 m-t-xs m-b-xs">
															<div class="select filter" data-resize="auto">
																<button data-toggle="dropdown"
																	class="btn btn-sm btn-default dropdown-toggle">
																	<span class="dropdown-label" style="width: 105px;">All</span>
																	<span class="caret"></span>
																</button>
																<ul class="dropdown-menu">
																	<li data-value="all"><a
																		href="#">All</a></li>
																	<li data-value="lt5m"><a
																		href="#">Population &lt; 5M</a></li>
																	<li data-value="gte5m"><a
																		href="#">Population &gt;= 5M</a></li>
																</ul>
															</div>
														</div>
														<div class="col-sm-4 m-t-xs m-b-xs">
															<div class="input-group search datagrid-search">
																<input type="text" class="input-sm form-control"
																	placeholder="Search">
																<div class="input-group-btn">
																	<button class="btn btn-default btn-sm">
																		<i class="fa fa-search"></i>
																	</button>
																</div>
															</div>
														</div>
													</div>
												</th>
											</tr>
											<tr>
												<th data-property="toponymName" class="sortable">Name</th>
												<th data-property="countrycode" class="sortable">Country</th>
												<th data-property="population" class="sortable">Population</th>
												<th data-property="fcodeName" class="sortable">Type</th>
												<th data-property="geonameId" class="sortable">Edit</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Mexico City</td>
												<td>MX</td>
												<td>12294193</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=3530597"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Manila</td>
												<td>PH</td>
												<td>10444527</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1701668"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Dhaka</td>
												<td>BD</td>
												<td>10356500</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1185241"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Seoul</td>
												<td>KR</td>
												<td>10349312</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1835848"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Jakarta</td>
												<td>ID</td>
												<td>8540121</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1642911"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Tokyo</td>
												<td>JP</td>
												<td>8336599</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1850147"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Taipei</td>
												<td>TW</td>
												<td>7871900</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1668341"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Beijing</td>
												<td>CN</td>
												<td>7480601</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1816670"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Bogotá</td>
												<td>CO</td>
												<td>7102602</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=3688689"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Hong Kong</td>
												<td>HK</td>
												<td>7012738</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1819729"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Bangkok</td>
												<td>TH</td>
												<td>5104476</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1609350"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Singapore</td>
												<td>SG</td>
												<td>3547809</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1880252"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Pyongyang</td>
												<td>KP</td>
												<td>3222000</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1871859"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Kabul</td>
												<td>AF</td>
												<td>3043532</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1138958"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Caracas</td>
												<td>VE</td>
												<td>3000000</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=3646738"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Santo Domingo</td>
												<td>DO</td>
												<td>2201941</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=3492908"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Havana</td>
												<td>CU</td>
												<td>2163824</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=3553478"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Tashkent</td>
												<td>UZ</td>
												<td>1978028</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1512569"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Phnom Penh</td>
												<td>KH</td>
												<td>1573544</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1821306"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
											<tr>
												<td>Kuala Lumpur</td>
												<td>MY</td>
												<td>1453975</td>
												<td>capital of a political entity</td>
												<td><a href="modal.html?geonameid=1735161"
													data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a></td>
											</tr>
										</tbody>
										<tfoot>
											<tr>
												<th class="row" colspan="5">
													<div
														class="datagrid-footer-left col-sm-6 text-center-xs m-l-n"
														style="visibility: visible;">
														<div class="grid-controls m-t-sm">
															<span> <span class="grid-start">1</span> - <span
																class="grid-end">20</span> of <span class="grid-count">146
																	items</span>
															</span>
															<div class="select grid-pagesize dropup"
																data-resize="auto">
																<button data-toggle="dropdown"
																	class="btn btn-sm btn-default dropdown-toggle">
																	<span class="dropdown-label">20</span> <span
																		class="caret"></span>
																</button>
																<ul class="dropdown-menu">
																	<li data-value="5"><a href="#">5</a></li>
																	<li data-value="10"><a href="#">10</a></li>
																	<li data-value="20"><a href="#">20</a></li>
																	<li data-value="50"><a href="#">50</a></li>
																	<li data-value="100"><a
																		href="#">100</a></li>
																</ul>
															</div>
															<span>Per Page</span>
														</div>
													</div>
													<div
														class="datagrid-footer-right col-sm-6 text-right text-center-xs"
														style="visibility: visible;">
														<div class="grid-pager m-r-n">
															<button type="button"
																class="btn btn-sm btn-default grid-prevpage"
																disabled="disabled">
																<i class="fa fa-chevron-left"></i>
															</button>
															<span>Page</span>
															<div class="inline">
																<div class="input-group dropdown combobox">
																	<input class="input-sm form-control" type="text">
																	<div class="input-group-btn dropup">
																		<button class="btn btn-sm btn-default"
																			data-toggle="dropdown">
																			<i class="caret"></i>
																		</button>
																		<ul class="dropdown-menu pull-right">
																			<li><a>1</a></li>
																			<li><a>2</a></li>
																			<li><a>3</a></li>
																			<li><a>4</a></li>
																			<li><a>5</a></li>
																			<li><a>6</a></li>
																			<li><a>7</a></li>
																			<li><a>8</a></li>
																		</ul>
																	</div>
																</div>
															</div>
															<span>of <span class="grid-pages">8</span></span>
															<button type="button"
																class="btn btn-sm btn-default grid-nextpage">
																<i class="fa fa-chevron-right"></i>
															</button>
														</div>
													</div>
												</th>
											</tr>
										</tfoot>
									</table>
								</div>
							</section>
						</section>
					</section>
					<a href="#" class="hide nav-off-screen-block"
						data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
				</section>
				<aside class="bg-light lter b-l aside-md hide" id="notes">
					<div class="wrapper">Notification</div>
				</aside>
			</section>
		</section>
	</section>
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./table-datagrid_files/app.v1.js"></script>
	<!-- fuelux -->
	<script src="./table-datagrid_files/underscore-min.js"></script>
	<script src="./table-datagrid_files/fuelux.js"></script>
	<script src="./table-datagrid_files/demo.datagrid.js"></script>
	<script src="./table-datagrid_files/app.plugin.js"></script>
	<div id="selectTextSize" style="">Population &gt;= 5M</div>
</body>
</html>